<template>
  <div id="bg">
    <h1>软件传媒信息平台<br />(v2.0)</h1>

    <div class="loginMain">
      <div class="loginBox loginFrom">
        <div class="title">登录</div>
        <div style="text-align: center;">
          <input type="text" placeholder="请输入手机号" v-model="phone" />
          <input type="text" placeholder="请输入密码" v-model="password" />
        </div>
        <div style="text-align: center;">
          <button class="loginBtn" @click="login">登录</button>
        </div>
      </div>
      <div
        class="loginBox loginBg bgMove"
        @mousemove="move($event)"
        ref="bgMove"
      >
        <div class="loginBgM">
          <div class="title"></div>
        </div>
      </div>
    </div>
    <div class="bottom">河南科技大学软件学院软件传媒 开发</div>
    <div class="bottom">奋力打造具有较强传播力的一流传媒队伍</div>
    <div class="bottomGray">（申请账户或忘记密码请联系分管主席）</div>
  </div>
</template>

<script>
import loginApi from "../api/login.js";
import token from "../api/token.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      myget: this.$myajax.myget,
      phone: "",
      password: "",
      res: null,
      isMove: true
    };
  },
  methods: {
    login() {
      if (!this.phone || !this.password) {
        this.$parent.Alert("请输入完整信息", "error");
        return;
      }
      loginApi.login(this.phone, this.password).then(res => {
        this.res = res;
        if (res.length == 1) {
          this.$parent.Alert("成功", "success");
          let data = res[0];
          for (let key in data) {
            localStorage.setItem("haust-twxsh-" + key, data[key]);
          }
          localStorage.setItem("haust-twxsh-token", token.getToken());
          if (this.$route.query.path) {
            this.$router.push(this.$route.query.path);
          } else {
            this.$router.push("/main");
          }
        } else {
          this.$parent.Alert("失败", "error");
        }
      });
    },
    move(event) {
      // event
      if (!this.isMove) {
        this.$refs.bgMove.classList.remove("bgMove");
        // console.log(event)
        this.$refs.bgMove.style.backgroundPosition =
          (event.offsetX / event.target.offsetWidth) * 100 + "% 80%";
        // console.log(event)
      }
    }
  },
  mounted() {
    this.$refs.bgMove.addEventListener("animationend", () => {
      this.isMove = false;
    });
    if (localStorage.getItem("haust-twxsh-token")) {
      this.$router.push("/main");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#bg {
  width: 100%;
  min-height: 100%;
  position: absolute;
  background-color: rgb(40, 77, 165);
  /* background: url(https://pic.imgdb.cn/item/62c42c165be16ec74aecff0c.jpg); */
}

h1 {
  font-size: 2.5em;
  text-align: center;
  color: white;
  margin-top: 20px;
}

.loginMain {
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-direction: column-reverse; */
  margin-top: 20px;
}

.loginBox {
  width: 45%;
  max-width: 500px;
  height: 300px;
  /* border-radius: 20px; */
}

@keyframes bgMove {
  0% {
    background-position: 0% 80%;
  }

  60% {
    background-position: 100% 80%;
  }

  100% {
    background-position: 40% 80%;
  }
}

.loginBg {
  background: url(https://pic.imgdb.cn/item/62dacd17f54cd3f9373d5dc4.jpg);
}

.bgMove {
  animation-name: bgMove;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.loginBgM {
  background: rgba(255, 255, 255, 0.8);
  height: 100%;
}

.loginFrom {
  background-color: rgb(255, 255, 255);
}

.title {
  font-size: 20px;
  padding: 10px;
}

.loginBtn {
  padding: 10px 20px;
  border: 3px solid #55aaff;
  background-color: #fff;
  margin: 20px;
  transition: all 0.5s;
}

.loginBtn:hover {
  background-color: #55aaff;
  color: white;
}

[type="text"] {
  /* text-align: center; */
  outline: none;
  padding: 10px;
  border: 0;
  border-bottom: 2px solid #ccc;
  transition: all 0.5s;
  width: 60%;
  margin-top: 15px;
}

[type="text"]:hover,
[type="text"]:focus {
  /* text-align: center; */
  border-bottom: 2px solid #55aaff;
}

.bottom {
  color: white;
  font-size: 1.2rem;
  text-align: center;
  margin: 15px;
}
.bottomGray {
  color: #eee;
  font-size: 0.8rem;
  text-align: center;
  margin: 15px;
}
@media (max-width: 620px) {
  .loginMain {
    flex-direction: column-reverse;
  }

  .loginBox {
    width: 90%;
    /* border-radius: 20px; */
  }

  .loginBg {
    transition: all 0.2s;
  }
}
</style>
